<template>
    <div class="table">
        
        <div style="float: left; margin-top: 10px; margin-left: 16px;width: 200px;">
            <el-text size="large">id：</el-text>
            <el-input class="input2" v-model="problemParm.problemId" @change="getProblemList" :placeholder="$t('problemView.searchInput')" />
        </div>
        
        <div style="float: left; margin-top: 10px;">
            <el-text size="large">{{ $t('problemView.search') }}</el-text>
            <el-input class="input" v-model="problemParm.problemDescribe" @change="getProblemList" :placeholder="$t('problemView.searchInput')"  />
        </div>


        
        
        <div style="float: left;">
            <el-dropdown placement="bottom" style="margin-left: 15px; margin-top: 10px;">
                <el-button class="buttom"> {{ $t('problemView.difficulty') }}<el-icon><ArrowDown /></el-icon></el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleDifficultyChange(null)">{{ $t('enum.all') }}</el-dropdown-item>
                        <el-dropdown-item @click="handleDifficultyChange(1)">{{ $t('enum.simple') }}</el-dropdown-item>
                        <el-dropdown-item @click="handleDifficultyChange(2)">{{ $t('enum.medium') }}</el-dropdown-item>
                        <el-dropdown-item @click="handleDifficultyChange(3)">{{ $t('enum.difficulty') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <el-dropdown placement="bottom" style="margin-left: 15px; margin-top: 10px;">
                <el-button class="buttom">  {{ $t('problemView.type')}}<el-icon><ArrowDown /></el-icon></el-button>
                
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleTypeChange(null)">{{ $t('enum.all') }}</el-dropdown-item>
                        <el-dropdown-item @click="handleTypeChange(1)">{{ $t('enum.single') }}</el-dropdown-item>
                        <el-dropdown-item @click="handleTypeChange(2)">{{ $t('enum.fill') }}</el-dropdown-item>
                        <el-dropdown-item @click="handleTypeChange(3)">{{ $t('enum.judge') }}</el-dropdown-item>
                        <el-dropdown-item @click="handleTypeChange(4)">{{ $t('enum.multiple') }}</el-dropdown-item>
                        <el-dropdown-item @click="handleTypeChange(5)">{{ $t('enum.big') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

        <div style="float: left; margin-top: 15px;margin-left: 20%;">
            <el-button style="width: 100px;height: 40px;" type="primary" plain @click="saveProblemVisible=true,init()">新增题目</el-button>
            <el-button style="width: 100px;height: 40px;" type="primary" plain @click="loadProblemVisible=true">导入题目</el-button>
            <el-button style="width: 100px;height: 40px;" type="success" plain  @click="AIParmVisible=true">AI出题</el-button>
            
        </div>

        <el-table :data="problemList.items"  @row-click="handleRowClick"  class="el_table">
            <el-table-column prop="id" show-overflow-tooltip label="id" width="150px"/>
            <el-table-column prop="problemDescribe" show-overflow-tooltip :label="$t('problemView.description')" width="400px"/>
            <el-table-column prop="difficulty" sortable :label="$t('problemView.difficulty')" width="150px" >
                <template #default="scope">
                    {{getDifficultyType(scope.row.difficulty,$t)}}
                </template>
            </el-table-column>
            <el-table-column prop="type" sortable :label="$t('problemView.type')">
                <template #default="scope">
                    {{getProblemType(scope.row.type,$t)}}  
                </template>
            </el-table-column>
            <el-table-column prop="knowledgeList" size="large" show-overflow-tooltip :label="$t('problemView.knowledge')"/>
            <el-table-column size="large" label="选项">
                <template #default="scope">
                    <el-button type="danger" plain @click="async()=>{await deleteByid(scope.row.id),getProblemList()}">删除</el-button>
                    <el-button type="success" plain @click="addProblem=scope.row,saveProblemVisible=true" >编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <div class="pagination"><el-pagination layout="prev, pager, next" :page-size="problemParm.pageSize" :current-page="problemParm.pageNo" :total="problemList.counts" @current-change="handlePageChange"/></div>
    </div>


    <div>
        <el-dialog v-model="saveProblemVisible" title="题目设置" width="500" center style="margin-top: 30px;">
            <el-form :model="addProblem">
                

                <el-form-item :label="$t('problemView.type')">
                    <el-radio-group v-model="addProblem.type">
                        <div>
                            <el-radio style="width: 100px;" :value="1" border>{{$t('enum.single')}}</el-radio>
                            <el-radio style="width: 100px;" :value="2" border>{{$t('enum.fill')}}</el-radio>
                            <el-radio style="width: 100px;" :value="3" border>{{$t('enum.judge')}}</el-radio>
                        </div>
                        <div>
                            <el-radio style="width: 100px;" :value="4" border>{{$t('enum.multiple')}}</el-radio>
                            <el-radio style="width: 100px;" :value="5" border>{{$t('enum.big')}}</el-radio>
                        </div>
                    </el-radio-group>
                </el-form-item>

                <el-form-item :label="$t('problemView.difficulty')">
                    <el-radio-group v-model="addProblem.difficulty">
                        <el-radio style="width: 100px;" :value="1" border>{{$t('enum.simple')}}</el-radio>
                        <el-radio style="width: 100px;" :value="2" border>{{$t('enum.medium')}}</el-radio>
                        <el-radio style="width: 100px; " :value="3" border>{{$t('enum.difficulty')}}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="权限">
                    <el-radio-group v-model="addProblem.visible">
                        <el-radio style="width: 100px;" :value="true" border>可见</el-radio>
                        <el-radio style="width: 100px;" :value="false" border>不可见</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="描述">
                    <el-input v-model="addProblem.problemDescribe" type="textarea" rows="4"/>
                </el-form-item>

                <el-form-item label="解析">
                    <el-input v-model="addProblem.analysis" type="textarea"/>
                </el-form-item>

                <el-form-item label="代码">
                    <el-input v-model="addProblem.problemCode" type="textarea" rows="4"/>
                </el-form-item>

                <el-form-item label="语言">
                    <el-dropdown @command="(cmd)=>{addProblem.codeLanguage=cmd}">
                        <span class="el-dropdown-link">
                            {{addProblem.codeLanguage}}
                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>

                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="cpp">cpp</el-dropdown-item>
                                <el-dropdown-item command="python">python</el-dropdown-item>
                                <el-dropdown-item command="c">c</el-dropdown-item>
                                <el-dropdown-item command="js">js</el-dropdown-item>
                                <el-dropdown-item command="java">java</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-form-item>

                <el-form-item label="选项" v-if="addProblem.type===1 || addProblem.type===4">
                    <div v-for="(value,index) in addProblem.optionDescribe" :key="index">
                        <div style="float: left; width: 30px; ">{{String.fromCharCode(index+65)}}：</div>
                        <div style="float: right; margin-left: 10px;"><el-button @click="addProblem.optionDescribe.splice(index,1)">删除</el-button></div>
                        <div style="float: left;width: 200px; margin-left: 10px;"><el-input v-model="addProblem.optionDescribe[index]"/></div>
                    </div>

                    
                   <div style="margin-left: 5px;"><el-button @click="addProblem.optionDescribe.push('')" type="success" plain>新增选项</el-button></div>
                </el-form-item>



                <el-form-item>
                    <template #label>
                        答案
                        <el-tooltip v-if="addProblem.type!==3" content="单选多选：大写字母作为答案，顺序任意，不要有空格换行" effect="customized">
                            <el-icon><InfoFilled /></el-icon>
                        </el-tooltip>
                    </template>
                    <div v-if="addProblem.type!==3">
                        <div style="margin-left: 25px; margin-bottom: 10px;float: left;" v-for="(value,index) in addProblem.answer" :key="index">
                            <!-- <div style="float: left;width: 40px;">{{index}}:</div> -->
                            <div style="float: right; margin-left: 10px; margin-top: 10px;"><el-button @click="addProblem.answer.splice(index,1)">删除</el-button></div>
                            <div style="float: right;width: 200px;"><el-input v-model="addProblem.answer[index]" rows="4" type="textarea"/></div>
                        </div>

                        <div style="margin-left: 5px;margin-top: 10px;float: left;"><el-button @click="addProblem.answer.push('')" type="success" plain >新增答案</el-button></div>
                    </div>

                    <div v-else>
                        <el-radio-group v-model="addProblem.answer[0]">
                            <el-radio style="width: 100px;" value="正确" border>正确</el-radio>
                            <el-radio style="width: 100px;" value="错误" border>错误</el-radio>
                        </el-radio-group>
                    </div>

                </el-form-item>



            </el-form>


            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="saveProblemVisible = false">取消</el-button>
                    <el-button type="primary" @click="async()=>{await addProblemAPI(),saveProblemVisible=false,getProblemList()}">保存</el-button>
                </div>

                <div v-if="addProblem.aiReply && addProblem.aiReply.length>0">
                    <h1>AI原话回复：</h1>
                    <el-input v-model="addProblem.aiReply" type="textarea" disable rows="10"></el-input>
                </div>
            </template>
        </el-dialog>

    </div>


    <div>
        <el-dialog v-model="loadProblemVisible" title="导入题目" width="600px">
            <el-upload drag  :before-upload="handleBeforeUpload">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    拖动或 <em>点我上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        只支持excel文件，请先
                        <a href="/public/template.xlsx" download="template.xlsx">
                            <el-button style="font-size: 12px;"  type="primary" link>下载excel模板文件</el-button>
                        </a>
                        
                        ，按格式编辑后上传
                    </div>
                    <div class="el-upload__text" style="margin-top: 10px;">
                        重复策略：
                        <el-radio-group v-model="repeatSkip">
                            <el-radio :value="true" size="small" border>跳过</el-radio>
                            <el-radio :value="false" size="small" border style="margin-left: -19px;">覆盖</el-radio>
                        </el-radio-group>
                    </div>
                </template>
            </el-upload>

            <div v-if="uploadProblemDetail">
                <h4>总计：{{uploadProblemDetail.totalProblemNumber}}  成功：{{uploadProblemDetail.successProblemIds.length}}  跳过或失败：{{uploadProblemDetail.skipOrFailVOList.length}}</h4>
                <h4>错误日志：</h4>
                <div style="border: 2px solid rgb(196, 192, 192); padding: 5px; margin: 5px;">
                    <div v-for="(item,index) in uploadProblemDetail.skipOrFailVOList" :key="index">
                        第{{item.rowIndex}}行错误(跳过)，原因：{{item.reason}}
                    </div>
                </div>

                <div style="margin-top: 10px;text-align: center;"><el-button type="success" plain>查看成功添加的题目列表</el-button></div>
            </div>
            

        </el-dialog>


        <el-dialog v-model="AIParmVisible" title="AI出题" width="400px" style="height: 400px;" >


            <el-form v-loading="loading" element-loading-text="出题中，该过程可能需要几十秒的时候，请耐心等待">
                <el-form-item label="提示：">填空或大题出的很若只，建议使用单选多选判断，获取后请仔细校验题目，选项与答案</el-form-item>
                <el-form-item label="出题要求："><el-input v-model="aiProblemParm.description"></el-input></el-form-item>
                <el-form-item label="题目类型：">
                    <el-radio-group v-model="aiProblemParm.typeString">
                        <el-radio style="margin-top: 5px;" value="单选" size="small" border>单选</el-radio>
                        <el-radio style="margin-top: 5px;" value="多选" size="small" border>多选</el-radio>
                        <el-radio style="margin-top: 5px;" value="判断" size="small" border>判断</el-radio>
                        <el-radio style="margin-top: 5px;" value="填空" size="small" border>填空</el-radio>
                        <el-radio style="margin-top: 5px;" value="大题" size="small" border>大题</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-button style="margin-left: 40%;" type="primary" @click="async()=>{loading=true,await getAIProblem(),saveProblemVisible=true,loading=false}">开始出题</el-button>
            </el-form>


        
        </el-dialog>
    </div>

</template>


<script setup lang="ts">

    import useProblem from '@/hooks/useProblem'
    import useEnum from '@/base/useEnum'
    import {onMounted,ref} from 'vue'
    import useProblemAdmin from '@/hooks/admin/useProblemAdmin'
    const {problemList,problemParm,handleTypeChange,handleDifficultyChange,getProblemList,handlePageChange,handleRowClick} = useProblem()
    const {getProblemType,getDifficultyType} = useEnum()
    const {addProblem,repeatSkip,uploadProblemDetail,aiProblemParm,getAIProblem,handleBeforeUpload,deleteByid,init,addProblemAPI}=useProblemAdmin()
    const saveProblemVisible=ref<boolean>(false)
    const loadProblemVisible=ref<boolean>(false)
    const AIParmVisible=ref<boolean>(false)
    const loading=ref<boolean>(false)
    onMounted(()=>{
        getProblemList()
    })
</script>


<style>
.el-popper.is-customized {
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}

</style>

<style scoped>

    .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    }

    .input{
        margin-left: 10px;
        margin-bottom: 10px;
        width: 70%;
        margin-top: 10px;
    }

    .input2{
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 70%;
        height: 30px;
    }


    .table{
        margin-top: 3%;
        height:650px;

    }

    
    .pagination {
        margin-top: 10px;
        display: flex;  
        justify-content: center;
    }
    .el_table{
            width: 100%;
            cursor: pointer;
        }

        .buttom{
            margin-top: 10px;
        }
</style>